<template>
  <div class="client-service">
    <el-table :show-header="false" :data="serviceData" v-loading="isLoading" element-loading-text="数据加载中...">
      <el-table-column>
        <template #default="{ row }">
          <AvatarView :info="row" avatarName="userName" :avatarStyle="{ width: '50px', height: '50px', radius: '50%' }" />
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="{ row }">
          <span>姓名：{{ row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="{ row }">
          <span>电话：{{ row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="{ row }">
          <span>角色：{{ row.roleName }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";
import AvatarView from "@/components/customComponents/AvatarView/index.vue";
import { getServiceTeam } from "@/apis/clientManager";

const props = defineProps({
  customerId: {
    type: String,
    default: ""
  }
});

const isLoading = ref(false);
const serviceData = ref([]);
const getServiceTeamData = async () => {
  try {
    isLoading.value = true;
    const { data } = await getServiceTeam(props.customerId);
    serviceData.value = data || [];
    isLoading.value = false;
  } catch (err) {
    isLoading.value = false;
  }
};

getServiceTeamData();
</script>

<style scoped lang="scss">
@use "clientService";
</style>
